<template>
  <div class="grayPage">
   <div class="banner">
    <div class="header">
      <div class="head">
        <img :src="head">
      </div>
      <div class="name text-center">{{brokerNickName}}</div>
    </div>
  </div>
  <div class="centerContent box-shadow content">
    <div class="info-box">
      <div class="info fl" @click="copy">
        <span class="agentQQ">QQ</span>
        <span>{{brokerQQ}}</span>
      </div>
    </div>
    <div class="info-box">
      <div class="info fl">
        <span>微信</span>
        <span>{{brokerWechat}}</span>
      </div>
      <div class="fr arrow">
        <img src="/static/wechat/images/arrow@2x.png">
      </div>
    </div>
    <div class="info-box">
      <a :href="myAgentTel" class="info fl">
        <span>手机号码</span>
        <span>{{brokerPhone}}</span>
      </a>
    </div>
  </div>
  <div class="service text-center">客服服务：400-XXX-XXX</div>
  <bottomMenu :menuType="menuType"></bottomMenu>
</div>
</template>

<script>
  import bottomMenu from './bottomMenu.vue'
  import {zgzUser} from'@/controller'
  export default {
    name: 'myAgent',
    data () {
      return {
        menuType:3,
        head:'/static/wechat/images/head.png',
        brokerNickName:'',
        brokerWechat:'',
        brokerQQ:'',
        brokerPhone:'',
        myAgentTel:''
      }
    },
    components: {
      'bottomMenu': bottomMenu
    },
    mounted(){
      zgzUser().then((res)=>{
        //暂时先分一个 后面再添加
        if(res.code == 0) {
          let temp = res.data.rdd_broker
          this.brokerNickName = temp.brokerNickName
          this.brokerWechat = temp.brokerWechat
          this.brokerQQ = temp.brokerQQ
          this.brokerPhone = temp.brokerPhone
          this.myAgentTel = 'tel:'+this.brokerPhone
          localStorage.setItem('myAgentTel',this.brokerPhone)
        }
      })
    },
    methods:{
      copy:function(){

      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner{
  background: url("/static/wechat/images/centerBg@2x.png");
  background-size: 100%;
}
.centerContent .info-box{
 width: 92%;
 margin: 0 auto;
 position: relative;
 color: #333;
 font-size: 16px;
 overflow: hidden;
 border-bottom: 1px solid #e8e8e8;
}
.centerContent .info-box:last-child{
  border-bottom: none;
}
.centerContent .info-box .arrow{
  position: absolute;
  width: 18px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.centerContent .info-box .arrow img{
  width: 100%;
}
.centerContent .info-box .info {
 width: calc( 100% - 18px);
 border: none;
}
.centerContent .info-box .info span:first-child {
  width:30%;
}
.centerContent .info-box .info span:last-child {
  width:65%;
  text-align: right;
}
.grayPage .service{
  color: #999;
  padding: 5% 0;
}
</style>
